<template>
    <div style="height:50px; line-height:50px; border-bottom:1px solid #cccccc; display: flex;background-color: #2a5caa;">
        <div style="width:200px; margin-left: 30px;font-weight: bold; color:#ffffff;">后台管理系统</div>
        <div style="flex:1px"></div>
        <div style="width:100px; margin-right: 35px;">
            <el-dropdown>
                <span class="el-dropdown-link" style="color: #fff;">
                    <div>
                         <el-avatar
                                 src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                         ></el-avatar>
                    </div>
                    <el-icon class="el-icon--right">
                    <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item v-on:click="baseInfo();">明信片</el-dropdown-item>
                        <el-dropdown-item v-on:click="modifyPass()">修改秘密</el-dropdown-item>
                        <el-dropdown-item @click="loginOut()">登出系统</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>

        <!--弹窗，用户基本信息-->
        <div class="app-container">
            <el-dialog v-model="dialogFormVisible"  width="55%">
                <el-row :gutter="20">
                    <el-col :span="24" style="text-align: center;">
                        <el-avatar :size="120">
                            <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>
                        </el-avatar>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12" >
                            <span class="userBaseTab">姓名：</span>
                            <span class="userBaseContent">{{userData.userName}}</span>
                    </el-col>
                    <el-col :span="12">
                        <span class="userBaseTab">姓别：</span>
                        <span clas  s="userBaseContent">
                            {{userData.sex}}
                        </span>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <span class="userBaseTab">联系电话：</span>
                        <span class="userBaseContent">{{userData.phone}}</span>
                    </el-col>
                    <el-col :span="12">
                        <span class="userBaseTab">邮箱：</span>
                        <span clas  s="userBaseContent">
                            {{userData.email}}
                        </span>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <span class="userBaseTab">联系地址：</span>
                        <span class="userBaseContent">{{userData.address}}</span>
                    </el-col>
                </el-row>
            </el-dialog>
        </div>

        <!--弹窗，用户基本信息-->
        <div class="app-container">
            <el-dialog v-model="userDialogFormVisible" title="修改密码" width="30%" >
                <el-form :model="userForm" :label-position="right" label-width="100px" >
                    <el-form-item label="原始密码:">
                        <el-input v-model="userForm.oldPassword" show-password="true"	  placeholder="原始密码"  style="width:90%" ></el-input>
                    </el-form-item>
                    <el-form-item label="新密码:">
                        <el-input v-model="userForm.password"  show-password="true" placeholder="新密码"  style="width:90%" ></el-input>
                    </el-form-item>
                    <el-form-item label="确认新密码:">
                        <el-input v-model="userForm.passwordConfirm" show-password="true"  placeholder="确认新密码"  style="width:90%" ></el-input>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="userDialogFormVisible = false">取消</el-button>
                        <el-button type="primary" @click="modifyPassConfirm()">确认</el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
    </div>
</template>
<script>
    import request from "../utils/request";
    import {ElMessage} from "element-plus";

    export default {
        name:"Header",
        data(){
            user:{}
            return{
                dialogFormVisible:false,
                userDialogFormVisible:false,
                userData:{},
                userForm:[]
            }
        },
        created(){
            const  user =sessionStorage.getItem("user");
            this.user=user;
        },

        methods:{

            ///登出
            loginOut(){
               request.post("/api/user/sys/loginOut").then(resp=>{
                   if(resp.status=="M0200"){
                       sessionStorage.removeItem("user");
                       this.$router.push("/login");
                   }else{
                       ElMessage({
                           message:resp.msg,
                           type:"error"
                       })
                   }
               })
            },

            ///打开明信片弹窗
            baseInfo(){
                this.dialogFormVisible=true;
                this.userData=JSON.parse(sessionStorage.getItem("user"));
            },

            ///打开修改密码弹窗
            modifyPass(){
                this.userDialogFormVisible=true
            }
            ,
            //确认修改密码
            modifyPassConfirm(){

            }
        }
    }
</script>
<style>
    .userBaseTab{
        font-weight:bold;
        font-size: 20px;
    }
    .userBaseContent{
        font-size:18px;
    }
</style>
